<template>
  <div class="category">
    <ul class="left">
      <li
        v-for="category in categories"
        :key="category.id"
        is="router-link"
        :to="'/category/sub/' + category.id"
        tag="li"
      >{{category.name}}
      </li>
    </ul>
    <div class="right">
      <router-view />
    </div>
  </div>
</template>

<script>
import { getAllCategories } from '@/api/category'
export default {
  name: 'Category',
  data () {
    return {
      categories: []
    }
  },
  created () {
    getAllCategories().then(res => {
      console.log(res)
      this.categories = res
      this.$router.push('/category/sub/2').catch(() => {})
    })
  }
}
</script>

<style lang="scss" scoped>
.category {
  display: flex;
  height:100%;
  .left {
    width:25%;
    height:100%;
    background:#eee;
    li{
      height:30px;
      padding-left:8px;
      line-height:30px;
    }
  }
  .right {
    overflow-x: hidden;
    flex:1;
  }
  .router-link-exact-active.router-link-active {
      color: #666;
      background: #fff;
    }
}
</style>
